<template>
  <div class="orderTakingPool-box">
    <!-- 设计列表 -->
    <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />

    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
    >
      <el-table-column
        label="操作"
        class-name="operate"
        :align="'center'"
        show-overflow-tooltip
        width="230"
      >
        <template #default="scope" v-show="!scope.row.designer">
          <p @click="defineList(scope.row)">详情</p>
          <p
            @click="succeed(scope.row.id)"
            v-show="checkPermi(['system:measurement:jpdan']) && !scope.row.designer"
          >
            接单
          </p>
          <p
            @click="openSelectUser(scope.row.id)"
            v-show="checkPermi(['system:measurement:jpdan']) && !scope.row.designer"
          >
            派单
          </p>
        </template>
      </el-table-column>
    </forTableCom>
    <el-dialog v-model="dialogVisible" :title="dialogFlag" width="500">
      <span>{{ dialogTitle }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFlagFn" :class="dialogFlag">
            {{ dialogFlag }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <defineListCom v-if="defineListFlag" :id="defineListFlag" @closePopUps="closePopUps" />
    <selectUser ref="selectRef" @userOneInfo="userOneInfo" />
  </div>
</template>
<script setup>
import selectUser from '@/components/allUserInfo/index'
import {
  listMeasurement,
  designCheckMeasurement,
  jiedanApi,
  paidanApi,
  importTemplateApi,
} from '@/api/costSum'
import { getInfo } from '@/api/login'
import serchForm from '@/components/inventory/serchForm.vue'
import forTableCom from '@/components/forTableCom/index.vue'
import defineListCom from './components/defineList'
import { ref, onMounted, defineEmits } from 'vue'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { deletePopHook } from '@/hook/setPop/deletePop.js'
import { getdesignerMentsApi } from '@/api/tickets/index'
import { getApiDataRules } from '@/hook/getApiDataRules'
import { inputSearchHandler } from '@/hook/inputChange'
import { checkPermi } from '@/utils/permission.js'

let { apiRulesData } = getApiDataRules()
let { SearchHandler } = inputSearchHandler()

const selectRef = ref(null)
let userId = ref(null)

// 获取人员信息
const userOneInfo = async (v) => {
  let params = {
    employeeId: String(v.userIds),
    id: userId.value,
  }
  let { code, msg } = await paidanApi(params)
  if (code == 200) {
    proxy.$modal.msgSuccess(msg)
    querySelectProduct()
  }
}
/** 打开授权用户表弹窗 */
const openSelectUser = (id) => {
  userId.value = id
  selectRef.value.show()
}

const { proxy } = getCurrentInstance()
const emit = defineEmits(['goMeasurement'])

let defineListFlag = ref(false)
// 控制对话窗
let dialogVisible = ref(false)
let dialogFlag = ref('确认')
const dialogTitle = ref(`你确认要接下这个测量单吗？`)

// 勾选激活行的背景色
const idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)

// 设计师下拉数据
let designermenu = ref([])
// 设计师绑定的值
let designerModel = ref('')
// 设计师搜索下拉数据
let designerData = ref([])
// 获取设计师下拉菜单数据
const getdesignerApiData = async () => {
  let res = await getdesignerMentsApi()
  designermenu.value = apiRulesData(res).map((v) => {
    return {
      designerName: v.employeeName,
      designerId: v.employeeId,
    }
  })
}
// 表单
let inventoryForm = ref({
  id: '', // 测量单编号
  surveyDate: '', // 测量日期
  // designerName: '',      // 设计人员
  customerId: '', //
  terminalName: '', //
})

// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'id',
    label: '测量单编号',
  },
  {
    name: 'surveyDate',
    label: '测量日期',
    type: 'picker',
  },
  // {
  //     name: 'designerName',
  //     label: '设计人员'
  // },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer',
  },
  {
    name: 'terminalName',
    label: '终端名称',
  },
])

// 查找suppliersName
const onSearch = (v) => {
  pageNum.value = 1
  querySelectProduct(v)
}

// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'id',
    label: '测量单编号',
    colorClassName: 'activeColor',
  },
  {
    prop: 'surveyDate',
    label: '测量日期',
    colorClassName: 'activeColor',
  },
  {
    prop: 'customerName',
    label: '客户名称',
    colorClassName: 'activeColor',
  },
  {
    prop: 'terminalName',
    label: '终端名称',
    colorClassName: 'activeColor',
  },
  {
    prop: 'businessSurveyorName',
    label: '经营测量人员',
  },
  {
    prop: 'designElements',
    label: '设计元素',
  },
  {
    prop: 'terminalPhone',
    label: '终端电话',
  },
  {
    prop: 'designerName',
    label: '设计人员',
  },
])

// 表格数据内容
let inventoryTableData = ref([])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = inventoryForm.value
  querySelectProduct(params)
}

// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}

// 详情双击行
const tableDetail = (props) => {
  defineListFlag.value = props
}

// 接单确认
const dialogFlagFn = async () => {
  let params = {
    userId: '',
    id: dialogVisible.value,
  }
  let { user, code } = await getInfo()
  if (code == 200) {
    params.userId = user.userId
    let { code, msg } = await jiedanApi(params)
    if (code == 200) {
      proxy.$modal.msgSuccess(msg)
      dialogVisible.value = false
      querySelectProduct()
    }
  }
}

// 详情页
const defineList = (id) => {
  defineListFlag.value = id
}
const closePopUps = () => {
  defineListFlag.value = false
}
// 接单弹出框
const succeed = (id) => {
  dialogVisible.value = id
}

const querySelectProduct = async (data = {}) => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    designType: '待设计',
    // orderByColumn: idActive,
    // isAsc: 'desc'
  }
  let params = Object.assign(data, page)
  let res = await listMeasurement(params)
  let { code, rows, total } = res
  try {
    if (code == 200) {
      inventoryTableData.value = rows
      totals.value = total
    }
  } catch {}
}
// 在 Input 值改变时发送
const InputSearchChangeHandler = (searchValue, i) => {
  // hook
  // SearchHandler(v, arr, searchobj, includesName)
  switch (i) {
    case 'designerName':
      // 设计师
      designerData.value = SearchHandler(searchValue, designerModel, i)
      break
    default:
      break
  }
}

onMounted(() => {
  querySelectProduct()
  getdesignerApiData()
})
</script>

<style scoped lang="scss">
.orderTakingPool-box {
  padding: 16px;
}

.operate {
  p {
    color: #1a48fe;
    cursor: pointer;
  }
}

:deep(.dropdownSelect) {
  width: 126px;

  .scrollClassOrder {
    max-height: 120px;
    overflow-y: scroll;
  }

  .el-select-dropdown {
    min-width: 124px !important;
    width: 124px;

    .el-scrollbar {
      .el-scrollbar__view {
        .el-input {
          width: 100%;
          height: 20px;
          padding: 0 10px;
          font-size: 12px;
        }

        .el-select-dropdown__item {
          width: 100%;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
